﻿@model List<CategoryModel>
@using Nop.Plugin.Misc.FacebookShop.Models;
@helper RenderCategoryLine(CategoryModel category, int level, bool lastItem)
{
    <li @(lastItem ? Html.Raw(" class=\"last\"") : null)>
        <a href="@Url.RouteUrl("Plugin.Misc.FacebookShop.Category", new { categoryId = category.Id })">@category.Name</a>
        @{
            var levelClass = "";
            if (level == 0)
            {
                levelClass = "firstLevel";
            <div class="top-menu-triangle"></div>
            }
            if (category.SubCategories.Count > 0)
            {
            <ul class="sublist @levelClass">
               @for (var i = 0; i < category.SubCategories.Count; i++)
               {
                   var subCategory = category.SubCategories[i];
                   @RenderCategoryLine(subCategory, level + 1, i == category.SubCategories.Count - 1)
               }
            </ul>
            }
        }
    </li>
}
@if (Model.Count > 0)
{
    <ul class="top-menu">
        @for (var i = 0; i < Model.Count; i++)
        {
            var category = Model[i];
            @RenderCategoryLine(category, 0, i == Model.Count - 1)
        }
    </ul>
    
    <script type="text/javascript">
        $('li', '.top-menu').on('mouseenter', function () {
            $('a', $(this)).first().addClass('hover');
            if (!$(this).parent().hasClass('top-menu')) {
                var width = $(this).innerWidth();
                $('.sublist', $(this)).first().css('left', width + 15);
            }
            $('.sublist', $(this)).first().addClass('active');
            $('.top-menu-triangle', $(this)).addClass('active');
        });
        $('li', '.top-menu').on('mouseleave', function () {
            $('a', $(this)).first().removeClass('hover');
            $('.sublist', $(this)).first().removeClass('active');
            $('.top-menu-triangle', $(this)).removeClass('active');
        });
    </script>
}